<div class="layui-side layui-bg-black">
	<div class="layui-side-scroll">
		<#include "/apps/business/workordersthree/include/left.html">
	</div>
</div>
<div class="layui-body">
	<div class="layui-side-scroll">
		<div class="row" style="margin-bottom:20px;">
			<div class="col-lg-12">
				<h1 class="site-h1">
					工单概况
					<span style="float:right;">
						<a class="layui-btn layui-btn-sm green" href="/apps/workordersthree/add.html" title="创建新工单">
							<i class="layui-icon"></i>
							创建新工单
						</a>
					</span>
				</h1>
				<div class="row">
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="javascript:void(0)" class="ukefu-bt"> 
								<i class="kfont ukewo-btn ukefu-measure-btn">&#xe606;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${total!0}</div>
									<div class="ukefu-bt-text-content" style="">工单总数</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="javascript:void(0)" class="ukefu-bt"> 
								<i class="kfont ukewo-btn ukefu-measure-btn ukefu-bg-color-yellow">&#xe606;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${unclosed!0}</div>
									<div class="ukefu-bt-text-content" style="">未关闭工单总数</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/apps/workordersthree/myorders.html" class="ukefu-bt"> 
								<i class="kfont ukewo-btn ukefu-measure-btn ukefu-bg-color-pink">&#xe606;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${my!0}</div>
									<div class="ukefu-bt-text-content" style="">我的工单总数</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/apps/workordersthree/workitem.html" class="ukefu-bt"> 
								<i class="kfont ukewo-btn ukefu-measure-btn ukefu-bg-color-green">&#xe606;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${workitem!0}</div>
									<div class="ukefu-bt-text-content" style="">我的待办工单总数</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6" style="padding-right:5px;">
				<div class="box">
					<div class="box-title">
						<h1 class="site-h1" style="background-color:#EEEEEE;">工单类型分布</h1>
					</div>
					<div class="box-body" style="padding:5px;">
						<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
						<div id="osname" style="width: 100%;height:200px;"></div>
						<script type="text/javascript">
							// 基于准备好的dom，初始化echarts实例
							var osnamechart = echarts.init(document.getElementById('osname') , 'wonderland');
							
							var osnamechart_option = {
								    title : {
								        text: '工单类型',
								        x:'center'
								    },
								    tooltip : {
								        trigger: 'item',
								        formatter: "{a} <br/>{b} : {c} ({d}%)"
								    },
								    legend: {
								        orient: 'vertical',
								        left: 'left',
								        data: [<#assign inx = 0 ><#if wotypeOrders?? && wotypeOrders.content??><#list wotypeOrders.content as workOrders><#list workOrderTypeList as workOrderType><#if workOrderType.id == workOrders.key><#if inx gt 0>,</#if>"${workOrderType.name!''}"<#assign inx = inx+1 ></#if></#list></#list></#if>]
								    },
								    series : [
								        {
								            name: '工单类型',
								            type: 'pie',
								            radius : '55%',
								            center: ['50%', '60%'],
								            data:[
												<#assign inx = 0 ><#if wotypeOrders?? && wotypeOrders.content??><#list wotypeOrders.content as workOrders><#list workOrderTypeList as workOrderType><#if workOrderType.id == workOrders.key><#if inx gt 0>,</#if>{value:${workOrders.rowcount}, name:"${workOrderType.name}"}<#assign inx = inx+1 ></#if></#list></#list></#if>
								            ],
								            itemStyle: {
								                emphasis: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        }
								    ]
								};
		
							// 使用刚指定的配置项和数据显示图表。
							osnamechart.setOption(osnamechart_option);
							
						</script>
					</div>
				</div>
			</div>
			<div class="col-lg-6" style="padding-left:5px;">
				<div class="box">
					<div class="box-title">
						<h1 class="site-h1" style="background-color:#EEEEEE;">工单状态分布</h1>
					</div>
					<div class="box-body" style="padding:5px;">
						<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
						<div id="browser" style="width: 100%;height:200px;"></div>
						<script type="text/javascript">
							// 基于准备好的dom，初始化echarts实例
							var browserchart = echarts.init(document.getElementById('browser') , 'wonderland');
					
							var browserchart_option = {
								    title : {
								        text: '工单状态',
								        x:'center'
								    },
								    tooltip : {
								        trigger: 'item',
								        formatter: "{a} <br/>{b} : {c} ({d}%)"
								    },
								    legend: {
								        orient: 'vertical',
								        left: 'left',
								        data: [<#assign inx = 0 ><#if statusOrders?? && statusOrders.content??><#list statusOrders.content as workOrders><#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus><#if workOrdersStatus.id == workOrders.key || workOrdersStatus.code == workOrders.key><#if inx gt 0>,</#if>"${workOrdersStatus.name!''}"<#assign inx = inx+1 ></#if></#list></#list></#if>]
								    },
								    series : [
								        {
								            name: '工单状态',
								            type: 'pie',
								            radius : '55%',
								            center: ['50%', '60%'],
								            data:[
													<#assign inx = 0 ><#if statusOrders?? && statusOrders.content??><#list statusOrders.content as workOrders><#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus><#if workOrdersStatus.id == workOrders.key || workOrdersStatus.code == workOrders.key><#if inx gt 0>,</#if>{value:${workOrders.rowcount}, name:"${workOrdersStatus.name}"}<#assign inx = inx+1 ></#if></#list></#list></#if>
									        ],
								            itemStyle: {
								                emphasis: {
								                    shadowBlur: 10,
								                    shadowOffsetX: 0,
								                    shadowColor: 'rgba(0, 0, 0, 0.5)'
								                }
								            }
								        }
								    ]
								};
					
							// 使用刚指定的配置项和数据显示图表。
							browserchart.setOption(browserchart_option);
						</script>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<h1 class="site-h1" style="border-top:1px solid #e6e6e6;margin-top:15px;">
					待处理工单（${workOrdersList.totalElements!0}）
				</h1>
				<table class="layui-table" lay-skin="line">
					<thead>
						<tr class="design-sortable-tr">
							<th style="padding-left:5px;">编号</th>
							<th>标题</th>
							<th>联系人</th>
							<th>优先级</th>
							<th>状态</th>
							<th>处理人</th>
						</tr>
					</thead>
					<tbody>
						<#if workOrdersList?? && workOrdersList.content??>
						<#list workOrdersList.content as workOrders>
						<tr class="tdHasContorllor design-dropable-td">
							<td class="uk-workorders-td first_td_head">
								<div class="ukefu-workorders-number" id="fav_${workOrders.id!''}" title="创建时间：${workOrders.user.createtime?string("yyyy-MM-dd HH:mm:ss")}">
									<#include "/apps/business/workordersthree/orderno.html">
								</div>
							</td>
							<td>
								<a href="/apps/workordersthree/workitem.html?id=${workOrders.id!''}" title="${workOrders.title!''}">
								<#if workOrders.title?length gt 30>
									${workOrders.title[0..30]?no_esc}...
								<#else>
									${(workOrders.title!'')?no_esc}
								</#if>
								</a> 
							</td>
							<td>
								<#if workOrders.contacts??>
								${workOrders.contacts.name!''} 
								</#if>
							</td>
							<td>
								<#list uKeFuDic["com.dic.workorders.priority"] as workOrdersStatus>
									<#if workOrdersStatus.id == workOrders.priority>
										<i class="kfont" <#if workOrdersStatus.iconskin?? && workOrdersStatus.iconskin != "">style="color:${workOrdersStatus.iconskin}"</#if> title="优先级：${workOrdersStatus.name!''}">&#xe82d;</i>
									</#if>
								</#list>
							</td>
							<td>
								<#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus>
								<#if workOrdersStatus.id == workOrders.status || workOrdersStatus.code == workOrders.status>
								<small class="ukefu-label" <#if workOrdersStatus.iconskin?? && workOrdersStatus.iconskin != "">style="background-color:${workOrdersStatus.iconskin}"</#if>>${workOrdersStatus.name!''}</small>
								</#if>
								</#list>
							</td>
							<td>
								<#if workOrders.user??>
								${workOrders.user.username!''} （${workOrders.user.uname!''}）
								</#if>
							</td>
						</tr>
						</#list>
						<#else>
							<tr>
								<td colspan="20" style="height:400px;">
									<div class="ukefu-empty">
										<i class="layui-icon">&#xe63a;</i>
										<div style="">还没有工单信息</div>
									</div>
								</td>
							</tr>
						</#if>
					</tbody>
				</table>

			</div>
		</div>
		<div class="row" style="padding:5px;">
			<div class="col-lg-12" id="page" style="text-align:center;"></div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function(){
		layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  
		  laypage.render({
				elem: 'page'
				,pages: <#if contactsList??>${contactsList.totalPages}<#else>0</#if> //总页数
				,curr:<#if contactsList??>${contactsList.number+1}<#else>0</#if>
				,groups: 5 //连续显示分页数
				,jump:function(data , first){
					if(!first){
						location.href = "/apps/contacts/${subtype!'index'}.html?p="+data.curr ;
					}
				}
			});
		});
	});
</script>
